<template>
	<div class="panorama2">
		<div id="main" style="width: 418px;height: 238px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'panorama2',
		data() {
			return{
				cockpitData:[]
			}
		},
		mounted() {
			this.getList()
			
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "4d6fb754-6f56-40ec-8776-849ed4fcfe60",
							"fieldList": [{
					            "key":"statictype",
					            "value":"稀土永磁"
					        }] 
						} 
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				// let dataTemp1 = ['2018', '2019', '2020']
				let dataTemp1=this.cockpitData.map(item=>{
					return item.report_date
				})
				let dataQuanguo=this.cockpitData.map(item=>{
					// return Math.floor((item.中国/1000000000) * 100) / 100
					return item.中国占比
				})
				let dataZhejiang=this.cockpitData.map(item=>{
					// return Math.floor((item.宁波/1000000000) * 100) / 100
					return item.浙江占比
				})
				let dataNingbo=this.cockpitData.map(item=>{
					// return Math.floor((item.浙江/1000000000) * 100) / 100
					return item.宁波占比
				})
				let myChart = this.$echarts.init(document.getElementById('main'));
				let myColor = ['#04CDF4 ', '#AF89EB','#F5C73F'];
			
				//配置图表
				var option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					color:myColor,
					legend: {
						show: true,
						bottom:20,
						left:50,
						itemWidth: 8,
						itemHeight: 8,
						textStyle: {
						      color: "#FFFFFF",
							  fontSize:17
						    },
						icon: "circle",
						itemGap: 60,
						data: ['全国', '浙江','宁波'],
					},
					 grid: {
					    left: "15%",
						top:30,
						height:'55%',
					  },
					tooltip: [
						{
							trigger: 'axis',
							backgroundColor: "rgba(19, 19, 19, 0.9)",
							borderColor: "rgba(19, 19, 19, 0.9)",
							axisPointer: {
								type: 'line',
								
							},
							
							formatter:params=>{
								let str;
								let mycolor=['#04CDF4 ', '#AF89EB','#F5C73F']
								params.forEach((item,index)=>{
									str=item.name
									item.marker='<span style="display:inline-block;margin-right:4px;border-radius:10px;width:5px;height:5px;background-color:'+mycolor[index]+';"></span>'
								})
								let sumNum=0
								for(let i in params){
									sumNum+=params[i].value
								}
								// let p1 =(params[0].value / sumNum*100 ).toFixed(0);
								// let p2 =(params[1].value / sumNum*100 ).toFixed(0);
								// let p3 =(params[2].value / sumNum*100 ).toFixed(0);
								let p1 =params[0].value;
								let p2 =params[1].value;
								let p3 =params[2].value;
								// console.log(params[0].marker)
								return  `<span style=font-size:12px>${str}</span><br>`+params[0].marker+params[0].seriesName+'营收占比 '+`<span style=color:#04CDF4>${p1}%</span>`+
								'<br>'+params[1].marker+params[1].seriesName+'营收占比 '+`<span style=color:#AF89EB>${p2}%</span>`+
								'<br>'+params[2].marker+
								params[2].seriesName+'营收占比 '+`<span style=color:#F5C73F>${p3}%</span>`
							},
							
							textStyle: {
							      color: "#FFFFFF",
								  fontSize:14,
								  fontWeight:'bold'
							}
						},
					],
					yAxis: {
						// name:'单位：亿元',
						// nameLocation: "end",
						// nameTextStyle:{
						// 	color:'#99C8FF',
						// 	fontSize:15,
						// },
						type: 'value',
						axisLabel: {
							textStyle: {
								color: 'rgba(255, 255, 255, 0.6)',
								fontSize:15
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#B1B1B1 '
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: '#556468'
							}
						}
					},
					xAxis: {
						type: 'category',
						axisLine: {
							show: true,
							lineStyle: {
								color: '#B1B1B1 '
							}
						},
						axisLabel: {
							textStyle: {
								color: '#DFF8FF',
								fontSize:17
							}
						},
						axisTick: {
							show: false,
						},
						data: dataTemp1
					},
					series: [{
							name: '全国',
							type: 'line',
							smooth: true,
							symbol: 'none',
							// data: [50, 80, 25]
							data:dataQuanguo
						},
						{
							name: '浙江',
							type: 'line',
							smooth: true,
							symbol: 'none',
							// data: [40, 70, 20]
							data:dataZhejiang
						},
						{
							name: '宁波',
							type: 'line',
							smooth: true,
							symbol: 'none',
							// data: [30, 60, 15]
							data:dataNingbo
						},
					]
				};
				myChart.setOption(option);
			}
		}
	}
</script>


<style>

</style>
